<template>
  <div id="radarchart">
    <div id="radar"></div>
    <div id="radarData">
      <el-table :data="data" height="250" style="width: 100%;">
        <el-table-column label="#" type="index"></el-table-column>
        <el-table-column label="助攻" prop="助攻"></el-table-column>
        <el-table-column label="盖帽" prop="盖帽"></el-table-column>
        <el-table-column label="篮板" prop="篮板"></el-table-column>
        <el-table-column label="犯规" prop="犯规"></el-table-column>
        <el-table-column label="得分" prop="得分"></el-table-column>
        <el-table-column label="失误" prop="失误"></el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
import { RadarChart } from './RadarChart'
export default {
  data () {
    return {
      data: [],
      chart: ''
    }
  },
  mounted () {
    this.chart.data = this.data
    this.chart.draw()
  },
  created () {
    this.chart = new RadarChart('radar')
    this.setData()
  },
  methods: {
    setData () {
      let data = {
        助攻: 5,
        盖帽: 3,
        篮板: 6,
        犯规: 4,
        得分: 20,
        失误: 7
      }
      let data1 = {
        助攻: 11,
        盖帽: 2,
        篮板: 15,
        犯规: 5,
        得分: 17,
        失误: 3
      }
      this.data.push(data)
      this.data.push(data1)
    }
  }
}
</script>
<style scoped>
#radarchart {
  height: 100%;
  width: 100%;
}
#radar {
  height: 70%;
  width: 100%;
}
#radarData {
  height: 30%;
  width: 100%;
}
</style>
